<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50">
    <div class="container mx-auto px-4 py-6">
      <!-- 面包屑导航 -->
      <div class="flex justify-between items-center mb-6">
        <div class="text-gray-600">
          <span class="text-sm">出境旅游</span>
          <span class="mx-2">&gt;</span>
          <span class="text-sm">泰国（曼谷）</span>
        </div>
        <div class="flex items-center space-x-4">
          <button
            class="!rounded-button whitespace-nowrap flex items-center text-gray-600"
          >
            <i class="fas fa-list-ul mr-2"></i>列表展示
          </button>
          <button
            class="!rounded-button whitespace-nowrap flex items-center text-gray-600"
          >
            <i class="fas fa-th-large mr-2"></i>图片展示
          </button>
        </div>
      </div>
      <!-- 产品列表 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6" >
        <div
          v-for="(product, index) in products"
          :key="index"
          class="bg-white rounded-lg shadow-sm overflow-hidden"
        >
          <div class="relative h-48 overflow-hidden">
            <img
              :src="product.image"
              alt="旅游产品图片"
              class="w-full h-full object-cover object-top"
            />
            <div class="absolute top-2 left-2 flex gap-2">
              <span
                v-for="tag in product.tags"
                :key="tag"
                :class="{
                  'px-2 py-1 text-xs text-white rounded': true,
                  'bg-red-500': tag === '最选',
                  'bg-orange-500': tag !== '最选',
                }"
              >
                {{ tag }}
              </span>
            </div>
            <div
              class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/70 to-transparent"
            >
              <p class="text-white text-sm font-medium">
                {{ getTitle(product.title) }}
              </p>
            </div>
          </div>
          <div class="p-4">
            <div class="flex items-baseline mb-2">
              <span class="text-red-500 text-sm">¥</span>
              <span class="text-red-500 text-2xl font-bold">{{
                product.price
              }}</span>
              <span class="text-red-500 text-sm ml-1">起</span>
            </div>
            <div class="mb-2">
              <h3 class="text-gray-800 line-clamp-2 h-12">
                {{ getCleanTitle(product.title) }}
              </h3>
            </div>
            <div class="flex items-center text-gray-500 text-sm">
              <i class="fas fa-eye mr-1"></i>
              <span>浏览量 {{ product.views }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        {
          image:
            "https://ai-public.mastergo.com/ai/img_res/758702f7358a68afb5c8da920650d9f2.jpg",
          tags: ["最选", "主推"],
          price: "3,680.00",
          title: "【泰·品质】G01: 曼谷 & 芭提雅 & 金沙岛六日",
          views: 1368,
        },
        {
          image:
            "https://ai-public.mastergo.com/ai/img_res/171600756b7a69e363a760f552f288ba.jpg",
          tags: ["最选", "主推"],
          price: "4,280.00",
          title: "【泰·尊享】G02: 曼谷 & 芭提雅 & 沙美岛双飞六日游",
          views: 892,
        },
        {
          image:
            "https://ai-public.mastergo.com/ai/img_res/7a624da202978e4830cd7fed5de3f84f.jpg",
          tags: ["最选"],
          price: "3,980.00",
          title: "【泰·休闲】G03: 曼谷 & 芭提雅 & 珊瑚岛五日游",
          views: 756,
        },
        {
          image:
            "https://ai-public.mastergo.com/ai/img_res/7edc9a9902903dbffa867fac8a3b6008.jpg",
          tags: ["最选", "特惠"],
          price: "4,580.00",
          title: "【泰·精选】G04: 曼谷 & 芭提雅 & 金沙岛奢华六日游",
          views: 624,
        },
      ],
    };
  },
  methods: {
    getTitle(title) {
      const match = title.match(/【.*?】/);
      return match ? match[0] : "";
    },
    getCleanTitle(title) {
      return title.replace(/【.*?】/, "").trim();
    },
  },
};
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
